<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        neutral: '#F5F7FA',
                        dark: '#1D2129'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #36CFC9 100%);
            }
            .card-shadow {
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            }
            .input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-5xl grid md:grid-cols-2 gap-8">
        <!-- 左侧装饰区域 -->
        <div class="hidden md:flex flex-col justify-center bg-gradient-primary rounded-2xl p-12 text-white relative overflow-hidden">
            <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32"></div>
            <div class="absolute bottom-0 left-0 w-48 h-48 bg-white/10 rounded-full -ml-24 -mb-24"></div>
            
            <div class="relative z-10">
                <h2 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold mb-4">欢迎登录</h2>
                <p class="text-white/80 mb-8 text-lg">请登录您的账户使用服务</p>
                
                <div class="space-y-6 mt-12">
                    <div class="flex items-center space-x-4">
                        <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center">
                            <i class="fa fa-shield text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-lg">安全保障</h3>
                            <p class="text-white/70">您的信息将被严格保密</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center space-x-4">
                        <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center">
                            <i class="fa fa-bolt text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-lg">快速访问</h3>
                            <p class="text-white/70">一键登录，高效便捷</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 右侧登录表单 -->
        <div class="bg-white rounded-2xl p-8 md:p-12 card-shadow">
            <div class="md:hidden mb-8">
                <h2 class="text-2xl font-bold text-dark mb-2">欢迎回来</h2>
                <p class="text-gray-500">请登录您的账户以继续</p>
            </div>
            
            <!-- 错误提示 -->
            {{#if message}}
            <div class="bg-blue-50 border border-blue-200 text-red-700 px-4 py-3 rounded mb-6 flex justify-between items-center">
                <span>{{ message }}</span>
                <button class="text-red-700 hover:text-red-900 font-bold" onclick="this.parentElement.style.display='none'">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            {{/if}}
            
            <form action="/user/login" method="post" class="space-y-6">
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-user text-gray-400"></i>
                        </div>
                        <input type="text" id="username" name="username" 
                            class="pl-10 w-full py-3 border border-gray-300 rounded-lg input-focus transition-all duration-200"
                            placeholder="请输入用户名" required>
                    </div>
                </div>
                
                <div>
                    <div class="flex justify-between items-center mb-1">
                        <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                    </div>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-lock text-gray-400"></i>
                        </div>
                        <input type="password" id="password" name="password" 
                            class="pl-10 w-full py-3 border border-gray-300 rounded-lg input-focus transition-all duration-200"
                            placeholder="请输入密码" required>
                        <div class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer" id="togglePassword">
                            <i class="fa fa-eye text-gray-400 hover:text-gray-600"></i>
                        </div>
                    </div>
                </div>
                
                <button type="submit" 
                    class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
                    登录
                </button>

            </form>

        </div>
    </div>
    
    <script>
        // 简单的表单验证和交互效果
        document.addEventListener('DOMContentLoaded', () => {
            const form = document.querySelector('form');
            const inputs = form.querySelectorAll('input');
            const togglePassword = document.getElementById('togglePassword');
            const passwordInput = document.getElementById('password');
            
            // 密码显示/隐藏切换
            togglePassword.addEventListener('click', () => {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                togglePassword.querySelector('i').classList.toggle('fa-eye');
                togglePassword.querySelector('i').classList.toggle('fa-eye-slash');
            });
            
            inputs.forEach(input => {
                input.addEventListener('focus', () => {
                    input.parentElement.classList.add('scale-[1.01]');
                    input.parentElement.style.transition = 'transform 0.2s ease';
                });
                
                input.addEventListener('blur', () => {
                    input.parentElement.classList.remove('scale-[1.01]');
                });
            });
            
            form.addEventListener('submit', (e) => {
                // 可以在这里添加额外的客户端验证
                let isValid = true;
                
                inputs.forEach(input => {
                    if (input.required && !input.value.trim()) {
                        isValid = false;
                        input.classList.add('border-red-500');
                        input.classList.add('focus:border-red-500');
                        input.classList.add('focus:ring-red-200');
                        
                        setTimeout(() => {
                            input.classList.remove('border-red-500');
                            input.classList.remove('focus:border-red-500');
                            input.classList.remove('focus:ring-red-200');
                        }, 3000);
                    }
                });
                
                if (!isValid) {
                    e.preventDefault();
                }
            });
        });
    </script>
</body>
</html>